<template>
<view class="inProgress">
  <view class="inProgress-box">
    <view class="inProgress-header">充电桩编号：{{chargePileQueryData.ConnectorId || ''}}</view>
    <view class="schedule">
      <view class="schedule-text">
        {{ '设备\n使用中' }}
      </view>
    </view>
    <view class="inProgress-text">
      <view class="inProgress-content">
        <view class="inProgress-list">
          <view class="text-w-70">充电时长</view>
          <view class="inProgress-number">{{chargeTime }}</view>
        </view>
        <view class="inProgress-list">
          <view class="text-w-70">充电电量(度)</view>
          <view class="inProgress-number">{{chargePileQueryData.TotalPower || 0}}</view>
        </view>
      </view>
      <view class="inProgress-content">
        <view class="inProgress-list">
          <view class="text-w-70">电费(¥)</view>
          <view class="inProgress-number">{{chargePileQueryData.ElecMoney || 0}}</view>
        </view>
        <view class="inProgress-list">
          <view class="text-w-70">服务费(¥)</view>
          <view class="inProgress-number">{{chargePileQueryData.SeviceMoney || 0}}</view>
        </view>
      </view>
    </view>
    <view class="tips-text">
      如果您通过车辆/车辆APP停止充电，两分钟内可重新启动充电。
      两分钟内未操作订单将自动结束，再次启动需扫码启动。
    </view>
    <view class="endign" @click="progressCharge">结束充电</view>
  </view>
</view>
</template>

<script>
import { showLoading, hideLoading} from '../common/uniapi.js'
import {chargePileStopApi, chargePileQueryChargeApi} from "../api/chargingManager/index"
export default {
  data(){
    return{
      connectorId:'',
      startChargeSeq: '',
      chargePileQueryData: {},
      chargeTime: '00:00:00',
      getChargeProgressInterval: null,
      chargingDurationInterval: null,
    }
  },
  onLoad(options){
    const { connectorId, startChargeSeq } = options
    console.log(connectorId, startChargeSeq);
    this.connectorId = connectorId
    this.startChargeSeq = startChargeSeq
    // 获取充电进度
    this.getChargeProgress()

    this.handleClearInterval()
      this.getChargeProgressInterval = setInterval(()=> {
        this.getChargeProgress()
      },3000)
    // }
  },
  //页面卸载清除定时器
  onUnload(){
    this.handleClearInterval()
  },
  methods:{
    /**定时任务关闭*/
    handleClearInterval(){
      console.log('关闭定时任务');
      clearInterval(this.getChargeProgressInterval)
      this.getChargeProgressInterval = null
      clearInterval(this.chargingDurationInterval)
      this.chargingDurationInterval = null
    },
    /**获取充电进度*/
    getChargeProgress(){
      // this.handleChargingDuration()
      chargePileQueryChargeApi({startChargeSeq: this.startChargeSeq}).then(res=>{
        this.chargePileQueryData = res.data
        console.log(this.chargePileQueryData);
        console.log('定时任务');
        this.handleChargingDuration()
        

        if (this.chargePileQueryData.StartChargeSeqStat >= 3) {
          this.progressCharge()
          this.handleClearInterval()
        }
      }).catch(err => {
        console.log(err);
        setTimeout(()=> {
          const pages = getCurrentPages()
          
          if (pages.length > 1){
            uni.navigateBack({
              delta: 1
            })
          }else {
            // TODO: 返回首页路由地址 待替换
            uni.switchTab({ url: '/pages/park/home/index' })
          }
        },1500)

      })
    },
    // 结束充电
    progressCharge(){
      showLoading()
      const { connectorId, startChargeSeq } = this
      let params = {
        connectorId,
        startChargeSeq
      }
      chargePileStopApi(params).then(res=>{
        hideLoading()
          uni.redirectTo({
            url: `/pages/charging/chargingManager/endCharging?startChargeSeq=${startChargeSeq}`
          })
      }).catch(err =>{
        hideLoading()
        uni.$u.toast(err.data.msg)
      })
    },
    /**处理充电时长展示*/
    handleChargingDuration(){
      let old_time = new Date(this.chargePileQueryData.StartTime || new Date().getTime()).getTime()
      let new_time = new Date().getTime()
      this.chargeTime = this.timestampDifference(old_time,new_time)
      if (!this.chargingDurationInterval) {
        this.chargingDurationInterval = setInterval(()=> {
            new_time = new Date().getTime()
            this.chargeTime = this.timestampDifference(old_time,new_time)
        },1000)
      }
    },
    timestampDifference(startTime,endTime){
      // 这里取绝对值 保证结果为正
      let _timeInterval = Math.abs(endTime - startTime)
  
      let hours = Math.floor(parseInt(_timeInterval)  / 1000 / 3600);
      let minutes = Math.floor(parseInt(_timeInterval) / 1000 / 60);
      let seconds = Math.floor(parseInt(_timeInterval) / 1000);
      //取模处理 60进制
      minutes = minutes % 60;
      seconds = seconds % 60;
      // 判断是否为空
      let str = ''
      hours = hours ? (hours < 10 ? '0' + hours : hours) + ":" : "00:";
      minutes = minutes ? (minutes < 10 ? '0' + minutes : minutes) + ":" : "00:";
      seconds = seconds ? (seconds < 10 ? '0' + seconds : seconds) + "" : "00";    
      str = hours + minutes + seconds
      return str
    }
  }
}
</script>

<style scoped>
.inProgress{
  width: 100vw;
  min-height: 100vh;
  background: #557EFF;
  box-sizing: border-box;
  padding-top: 20px;
}
.inProgress-box{
  width: 100vw;
  min-height: 97vh;
  background: #fff;
  padding: 20px 15px;
  border-radius: 24px 24px 0 0;
  box-sizing: border-box;
}
.inProgress-header{
  text-align: center;
  font-size: 14px;
  color: #767676;
}
.schedule{
  width: 200px;
  height: 200px;
  box-sizing: border-box;
  margin: 20px auto;
  position: relative;
  background-image: url('https://cdn-laser.oss-cn-shanghai.aliyuncs.com/spmp/images/loading.gif');
  background-size: 100% 100%;
  text-align: center;
  line-height: 200px;
}
.schedule img{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.schedule-text{
  font-size: 22px;
  font-weight: 500;
  color: #557EFF;

}
.inProgress-text{
  width: 100%;
  box-sizing: border-box;
  height: 200px;
  background: #FBFBFB;
  padding: 49px 40px;
}
.inProgress-content{
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.inProgress-list{
  font-size: 12px;
  color: #767676;
  text-align: center;
}
.inProgress-number{
  font-size: 18px;
  color: #1A1A1A;
  font-weight: 600;
  margin-top: 6px;
}
.endign{
  width: 100%;
  height: 48px;
  margin: 8px auto;
  text-align: center;
  color: #fff;
  line-height: 48px;
  box-sizing: border-box;
  background: #557EFF;
  border-radius: 87px 87px 87px 87px;
  margin-top: 31px;
}
.text-w-70 {
  width: 70px;
}
.tips-text {
  font-size: 12px;
  font-weight: 400;
  color: #FC8800;
  line-height: 18px;
}
</style>